<template>
	<view class="content">
		<view class="top_box">
			<view class="title">
				<image src="/static/g1.png" mode=""></image>
				<text>拼团</text>
			</view>
			<view class="dec">
				千万好物质等你，万人拼团价更低
			</view>
			<view class="g_user">
				<view class="img" v-for="item in allList" :key="item.id">
					<image :src="item.pic" mode=""></image>
				</view>
				<image v-if="total > 5" src="/static/g2.png" mode="" class="more"></image>
			</view>
			<view class="tip">
				超过5680人参与了万人团抢购
			</view>
		</view>
		
		<view class="sbox1">
			<view class="pageTitle">
				<view class="line1"></view>
				<text>正在疯抢</text>
				<view class="line2"></view>
			</view>
			<view class="tbox" v-if="groupList1.length">
				<view class="item" v-for="item in groupList1" :key="item.id" @click="handleToDetail(item.id)">
					<view class="image">
						<image :src="item.product.pic" mode="aspectFill"></image>
						<view class="over" v-if="item.involved == item.maxNum">
							抢光了
						</view>
						<view class="us" v-if="item.groupDetails && item.groupDetails.length">
							<image :src="item.groupDetails[0].pic" mode=""></image>
							<text>{{getTime(item.groupDetails[0].createTime)}}参与拼单</text>
						</view>
					</view>
					<view class="text">
						<view class="title">
							 {{item.product.name}}
						</view>
						<view class="progress">
							<view class="line-progress">
								<u-line-progress height="17" :percentage="(item.involved/item.miniNum) > 1?100:(item.involved / item.miniNum)*100" activeColor="#020202"></u-line-progress>
							</view>
							<text>已购{{item.involved}}件</text>
						</view>
						<view class="sd">
							<view class="left">
								<view class="price">
									￥{{item.groupPrice}}
								</view>
								<text>公益金：1元</text> 
							</view>
							<button class="btn">
								去拼单
							</button>
						</view>
					</view>
				</view> 
			</view> 
			<view class="null" v-else>
				<u-empty text="暂无拼团" icon="/static/e.png" marginTop="100" ></u-empty>
			</view> 
		</view>
		
		<view class="sbox1" v-if="groupList2.length">
			<view class="pageTitle">
				<view class="line1"></view>
				<text>即将开抢</text>
				<view class="line2"></view>
			</view>
			<view class="tbox">
				<view class="item" v-for="item in groupList2" :key="item.id">
					<view class="image">
						<image :src="item.product.pic" mode=""></image>
					</view>
					<view class="text">
						<view class="title">
							{{item.product.name}}
						</view>
						<!-- <view class="more_user">
							<view class="img">
								<image src="/static/logo.png" mode=""></image>
							</view>
							<view class="img">
								<image src="/static/logo.png" mode=""></image>
							</view>
							<view class="img">
								<image src="/static/logo.png" mode=""></image>
							</view>
							<view class="img">
								<image src="/static/logo.png" mode=""></image>
							</view>
							<text>等68人想买</text>
						</view> -->
						<view class="sd">
							<view class="left">
								<view class="price">
									￥{{item.groupPrice}}
								</view>
								<!-- <text>已将66元</text> -->
							</view>
							<!-- <button class="btn">
								提醒我
							</button> -->
						</view>
					</view>
				</view>
				  
			</view> 
		</view>
		
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				groupList1:[],
				groupList2:[],
				allList:[],
				total:''
			}
		},
		onLoad() {
			this.getList1()
			this.getList2()
			this.getAllList()
		},
		methods:{
			getAllList(){
				this.$http({
					url:"/pmsGroupConfig/queryAllGroupMembers",
					method:"get"
				}).then(data=>{
					this.allList = data.list
					this.total = data.total
				})
			},
			getList1(){
				this.$http({
					url:"/pmsGroupConfig/paginQuery",
					method:"get",
					data:{
						groupStatus:1,
						pageSize:99
					}
				}).then(data=>{
					this.groupList1 = data.list
				})
			},
			getTime(dateString){ 
				// 将字符串中的空格替换为 'T'，以符合 ISO 8601 格式
				const isoDateString = dateString.replace(' ', 'T');
				// 创建一个 Date 对象
				const date = new Date(isoDateString); 
				// 获取时间戳（以毫秒为单位）
				const timestamp = date.getTime(); 
				return uni.$u.timeFrom(timestamp)
			},
			getList2(){
				this.$http({
					url:"/pmsGroupConfig/paginQuery",
					method:"get",
					data:{
						groupStatus:0,
						pageSize:99
					}
				}).then(data=>{
					this.groupList2 = data.list
				})
			},
			handleToDetail(id){
				uni.navigateTo({
					url:`./detail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pageTitle{
		 display: flex;
		 align-items: center;
		 justify-content: center;
		 padding-top: 40rpx;
		 margin-bottom: 24rpx;
		 .line1{
			 width: 28rpx;
			 height: 4rpx;
			 background: linear-gradient( 270deg, #191919 0%, #FFFFFF 100%);
		 }
		 .line2{
			 width: 28rpx;
			 height: 4rpx;
			 background: linear-gradient( 270deg, #FFFFFF 0%, #191919 100%);
		 }
		 text{
			 font-weight: bold;
			 font-size: 32rpx;
			 margin: 0 20rpx;
		 }
	}
	.sbox1{
		.tbox{
			.item{
				background: #F8F8F8;
				padding: 24rpx;
				margin-bottom: 34rpx;
				.text{
					padding-top: 24rpx;
					.title{
						font-size: 28rpx;
						font-weight: bold;
						margin-bottom: 20rpx;
					}
					.more_user{
						display: flex;
						align-items: center;
						text{
							font-size: 24rpx;
							color: rgba(153, 153, 153, 1);
							margin-left: 10rpx;
						}
						.img{
							width: 34rpx;
							height: 34rpx;
							border: 1px solid #333;
							overflow: hidden;
							border-radius: 50%;
							margin-right: 2rpx;
							image{
								width: 34rpx;
								display: block;
								height: 34rpx;
							}
						}
					}
					.sd{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 30rpx;
						.btn{
							width: 160rpx;
							height: 64rpx;
							background: #020202;
							border-radius: 50rpx;
							text-align: center;
							line-height: 64rpx;
							color: #fff;
							font-size: 24rpx;
							margin: 0;
							&::after{
								border: none;
							}
							&.disabled{
								background: rgba(2, 2, 2, 0.20);
							}
						}
						.left{
							display: flex;
							align-items: center;
							.price{
								font-size: 40rpx;
								font-weight: bold;
							}
							text{
								font-size: 20rpx;
								color: #666666;
								background: #fff;
								padding: 3rpx 8rpx;
								margin-left: 10rpx;
							}
						}
					}
					.progress{
						display: flex;
						align-items: center;
						.line-progress{
							width: 368rpx;
						}
						text{
							font-size: 24rpx;
							color: #666;
							margin-left: 30rpx;
						}
					}
				}
				.image{
					position: relative;
					.over{
						position: absolute;
						width: 100%;
						height: 431rpx;
						background: rgba(0,0,0,0.4);
						left: 0;
						top: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 40rpx;
					}
					.us{
						width: 244rpx;
						height: 64rpx;
						background: rgba(0,0,0,0.3);
						border-radius: 32rpx;
						position: absolute;
						left: 30rpx;
						bottom: 30rpx;
						padding: 4rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						text{
							font-size: 20rpx;
							color: #fff;
						}
						image{
							width: 56rpx;
							height: 56rpx;
							border-radius: 50%;
							display: block;
							margin-right: 10rpx;
						}
					}
					image{
						width: 100%;
						height: 450rpx;
						display: block;
					}
				}
			}
		}
	}
	.content{
		padding: 24rpx;
		.top_box{
			background: #F8F8F8;
			padding: 34rpx 0;
			.dec{
				text-align: center;
				font-size: 28rpx;
				color: #333;
				margin-top: 20rpx;
			}
			.tip{
				text-align: center;
				font-size: 24rpx;
				color: #999999;
				margin-top: 26rpx;
			}
			.g_user{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 46rpx;
				.more{ 
					width: 76rpx;
					height: 76rpx;
				}
				.img{
					width: 74rpx;
					height: 74rpx;
					border: 1px solid #333;
					border-radius: 50%;
					overflow: hidden;
					margin: 0 8rpx;
					image{
						width: 74rpx;
						height: 74rpx;
						
					}
				}
			}
			.title{
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 46rpx;
					height: 46rpx;
					margin-right: 12rpx;
				}
				text{
					font-weight: bold;
					font-size: 40rpx;
				}
			}
		}
	}
</style>